﻿@model IEnumerable<TraCuuThuatNgu.Models.Question>
<style type="text/css">
   
</style>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">

    $(function () {

        // Declare a proxy to reference the hub. 
        var chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.


        // New question
        chat.client.newQuestion = function (username, content, type, qid, date) {

            // New question
            var newItem = '<div style="display:none" class="question-item">'
                                + '<div class="question-item-content">'
                                    + '<p>'
                                    + '<span class="username">' + username + '</span><span class="date">' + date + '</span>'
                                    + '<a style="float:right;margin-right:5px" title="Báo cáo sai phạm" class="btn-report-mini mark-report-qa" data-type="Q" data-val="' + qid + '"  href="javascript:">'
                                    + '</a></p>'
                                    + '<p>'
                                    + content + '</p>'
                                    + '<p style="text-align: right">'
                                    + '<a class="btn-answer" data-qid="' + qid + '" href="javascript:">Trả lời</a></p>'
                                + '</div>'
                                + '<div id="' + qid + '" class="answer-list">'
                                + '</div>'
                                        + '</div>';
            // Add new question
            $(newItem).prependTo('.question-list').fadeIn('slow');

        };
        // ---end

        // New answer
        chat.client.newAnswer = function (username, content, type, qid, date, aid) {

            // New answer
            var newItem = '<div style="display:none" class="answer-item">'
                                        + '<p>'
                                            + '<span class="username-a">' + username + '</span>'
                                            + '<span class="date">' + date + '</span>'
                                            + '<a style="float:right;margin-right:5px" title="Báo cáo sai phạm" class="btn-report-mini mark-report-qa" data-type="A" data-val="' + aid + '"  href="javascript:">'
                                            + '</a>'
                                            + '</p>'
                                        + '<p>' + content + '</p>'
                                    + '</div>';
            // Add new answer
            $(newItem).appendTo('#' + qid).fadeIn('slow');
        };
        // ---end


        // Check Authenticate
        var checkAuthen = $("#checkAuthen").val();

        // Start the connection.
        $.connection.hub.start().done(function () {

            // Send a question
            $('#sendquestion').click(function () {

                if (checkAuthen == 'true') {

                    var checkBlank = $("#questioncontent").val();
                    if ($.trim(checkBlank) == '') {
                        alert("Bạn chưa nhập nội dung.");
                        $("#questioncontent").focus();
                    } else {
                        // Call the Send method on the hub. 
                        chat.server.send($('#questioncontent').val(), "Q", 0);
                        // Clear text box and reset focus for next comment. 
                        $('#questioncontent').val('');
                    }
                } else {
                    alert("Bạn cần đăng nhập để sử dụng chức năng này!");
                }
            });
            // ---end

            // Answer a question -- send to server
            $("#btn-an").live('click', function () {

                var answer_content = $("#an-content").val();
                var qid = $(this).attr('data-qid');
                if ($.trim(answer_content) != '') {
                    chat.server.send(answer_content, "A", qid);
                    $(".an-dialog").remove();
                } else {
                    alert("Bạn chưa nhập nội dung.");
                    $("#an-content").focus();
                }

            });
            //  ---end

            // Report
            $(".mark-report-qa").live('click', function () {

                if (checkAuthen == 'true') {

                    var type = $(this).attr('data-type');
                    var id = $(this).attr('data-val');
                    chat.server.report(type, id);
                    alert('Bạn đã báo xấu nội dung này!');
                } else {
                    alert("Bạn cần đăng nhập để sử dụng chức năng này!");
                }
            });
            // ---end

        });
        // CLOSE -Start the connection.

        // Open answer dialog
        $(".btn-answer").live('click', function (e) {
            if (checkAuthen == 'true') {

                var pageX = e.pageX;
                var pageY = e.pageY;
                var qid = $(this).attr();

                //remove previous dialog
                $(".an-dialog").remove();

                $(".wrap-qa").append('<div class="an-dialog">'
                + '<h2>Trả lời:</h2>'
                + '<textarea id="an-content"></textarea>'
                + '<input class="btn btn-mini" id="btn-an" data-qid="' + $(this).attr("data-qid") + '" type="button" value="Gửi"/>'
                + '<a href="javascript:" class="btn-link an-btn-close">Đóng</a>'
                + '</div>');

                $('.an-dialog').css("top", pageY + 20 + "px");
                $('.an-dialog').css("left", pageX - 200 + "px");
                $('.an-dialog').slideDown('slow');

                $("#an-content").focus();

            } else {
                alert("Bạn cần đăng nhập để sử dụng chức năng này!");
            }
        });

        // Close answer dialog
        $(".an-btn-close").live('click', function () {
            $(this).parent().remove();
        });

        // ------------------------------
        // Report question or answer
        // show report icon Answer
        $(".answer-item").live('hover', function () {
            $(this).find(".mark-report-qa").show();
        });

        // hide report icon Answer
        $(".answer-item").live('mouseleave', function () {
            $(this).find(".mark-report-qa").hide();
        });

        // show report icon Question
        $(".question-item-content").live('hover', function () {
            $(this).find(".mark-report-qa").show();
        });

        // hide report icon Question
        $(".question-item-content").live('mouseleave', function () {
            $(this).find(".mark-report-qa").hide();
        });


    });
</script>
<div class="wrap-qa">
    <div class="input-question">
        <textarea id="questioncontent" placeholder="Nhập câu hỏi..."></textarea>
        <input type="button" class="btn" id="sendquestion" value="Gửi" />
        @if (Request.IsAuthenticated)
        {        
            <input type="hidden" id="checkAuthen" name="checkAuthen" value="true" />
        }
        else
        { 
            <input type="hidden" id="checkAuthen" name="checkAuthen" value="false" />             
        }
    </div>
    <div class="dr">
        <span id="focus"></span>
    </div>
    <div class="question-list">
        @foreach (var item in Model)
        {
            <div class="question-item">
                <div class="question-item-content">
                    <p>
                        <span class="username">@item.aspnet_Users.UserName</span><span class="date">@String.Format("{0:d/M/yyyy HH:mm}", item.DateAdd)</span>
                        <a style="float: right; margin-right: 5px" title="Báo cáo sai phạm" class="btn-report-mini mark-report-qa"
                            data-val="@item.QuestionId" data-type="Q" href="javascript:"></a>
                    </p>
                    <p>
                        @item.QContent</p>
                    <p style="text-align: right">
                        <a class="btn-answer" data-qid="@item.QuestionId" href="javascript:">Trả lời</a></p>
                </div>
                <div id="@item.QuestionId" class="answer-list">
                    @foreach (var an in item.Answers)
                    {
                        <div class="answer-item">
                            <p>
                                <span class="username-a">@an.aspnet_Users.UserName</span> <span class="date">@String.Format("{0:d/M/yyyy HH:mm}", an.DateAdd)</span>
                                <a style="float: right; margin-right: 5px" title="Báo cáo sai phạm" class="btn-report-mini mark-report-qa"
                                    data-val="@an.AnswerId" data-type="A" href="javascript:"></a>
                            </p>
                            <p>
                                @an.AContent</p>
                        </div>                   
                    }
                </div>
            </div>        
        }
    </div>
    <div style="text-align: center; margin-top: 10px;">
        <a href="javascript:" id="btn-prev" class="btn-showmore">← Mới hơn</a> <span id="limit"
            class="btn-showmore-count">1</span> <a href="javascript:" id="btn-next" class="btn-showmore">
                Cũ hơn →</a>
        <input type="hidden" value="" />
    </div>
</div>
